<template>
    <div class="box-view flex row">

        <div class="test-1"></div>

        <div class="test-view flex row">
            <div class="sanjiao-2"></div>
            <div class="test-2"></div>
        </div>

        <div class="sanjiao-3"></div>
        <div class="test-3"></div>

        <div style="margin-left: -15px">
            <canvas id="myCanvas"></canvas>
        </div>
        <div>
            <canvas id="myCanvas2"></canvas>
        </div>
        <!-- <canvas id="myCanvas2">

        </canvas> -->
    </div>
</template>
<script>
    export default {
        data() {
            return {

                myHeight: 30,
                baseLenght: 30,


                list: [
                    { id: 0, },
                    { id: 0, },
                    { id: 0, },
                    { id: 0, },
                    { id: 0, },
                    { id: 0, },
                    { id: 0, },
                    { id: 0, },
                ]
            }
        },
        mounted () {
            

            // 按照高度 30 进行计算
            let canvas = document.getElementById('myCanvas')
            canvas.width = this.WH(115);
	        canvas.height = this.WH(30);
            let ctx = canvas.getContext('2d');

            let gr = ctx.createLinearGradient(0, 0, 100, 0);
            gr.addColorStop(0, '#111');
            gr.addColorStop(1, '#CCC');

            ctx.beginPath();
            ctx.moveTo(this.WH(0), this.WH(0));
            ctx.lineTo(this.WH(15), this.WH(15));
            ctx.lineTo(this.WH(0), this.WH(30));
            ctx.lineTo(this.WH(100), this.WH(30));
            ctx.lineTo(this.WH(115), this.WH(15));
            ctx.lineTo(this.WH(100), this.WH(0));
            ctx.lineTo(this.WH(0), this.WH(0));
            ctx.strokeStyle = '#555';
            ctx.lineWidth = this.WH(1);
            ctx.fillStyle = gr;
            ctx.closePath()
            ctx.fill();
            ctx.stroke();



            this.huan();

        },
        methods: {
            WH (size) {
                let ratio = this.myHeight / this.baseLenght;
                return ratio * size;
            },



            huan () {
                let canvas = document.getElementById('myCanvas2')
                canvas.width = this.WH(115);
                canvas.height = this.WH(100);
                let ctx = canvas.getContext('2d');

                let gr = ctx.createLinearGradient(0, 0, 0, 60);
                gr.addColorStop(0, '#111');
                gr.addColorStop(1, '#CCC');

                ctx.beginPath();
                ctx.moveTo(this.WH(0), this.WH(0));
                // ctx.lineTo(this.WH(15), this.WH(15));
                // ctx.lineTo(this.WH(0), this.WH(30));
                // ctx.lineTo(this.WH(100), this.WH(30));
                // ctx.lineTo(this.WH(115), this.WH(15));
                // ctx.lineTo(this.WH(100), this.WH(0));
                // ctx.lineTo(this.WH(0), this.WH(0));

                ctx.arcTo(this.WH(30), this.WH(0), this.WH(30), this.WH(30), this.WH(30))
                ctx.arcTo(this.WH(30), this.WH(60), this.WH(0), this.WH(60), this.WH(30))

                ctx.strokeStyle = '#111';
                ctx.lineWidth = this.WH(1);

                ctx.fillStyle = gr;
                ctx.closePath()
                ctx.fill();
                ctx.stroke();
            }
        },
    }
</script>
<style scoped>
    .box-view {
        width: 1000px;
        height: 600px;
        border: 1px solid #EFEFEF;
    }
    .test-1 {
        width: 100px;
        height: 30px;
        background-color: aqua;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        border-top-width: 0;
    }

    .test-view {
        height: 30px;
        border: 1px solid #AAA;
        border-left-width: 0;
        border-right-width: 0;
        box-sizing: border-box;
        margin: 0 -15px 0 -15px;
    }

    .sanjiao-2 {
        border: 14px solid antiquewhite;
        border-left-color: transparent;
        width: 0;
        height: 0;
    }

    .test-2 {
        width: 100px;
        height: 100%;
        background-color: antiquewhite;
    }

    .sanjiao-3 {
        border: 15px solid aqua;
        border-left-color: transparent;
        width: 0;
        height: 0;
        margin: 0 -15px 0 -15px;
    }

    .test-3 {
        width: 100px;
        height: 30px;
        background-color: aqua;
    }
</style>